<template>
  <div class="vuu-page">
    <vuu-header :options="options"></vuu-header>
    <div class="vuu-content-t">
      <vuu-pull :id="'vuu-index'" :options="pullOptions">
        <div class="vuu-small-title">by . Lihui</div>
        <template v-for="(item , index) in paneList">
          <div @click="goHref(index)">
            <vuu-pane :options="item"></vuu-pane>
          </div>
        </template>
      </vuu-pull>
    </div>
  </div>
</template>
<script>
  import nav from '../components/navBar/nav-bar.vue'
  import pane from '../components/pane/pane.vue'
  import vuuPull from '../../src/pull.vue'
  let paneList = [
    {
      w1: '阴影效果',
      w2: '模拟原生实现下拉和上拉阴影效果',
      isViewHref:true
    },
    {
      w1: '下拉刷新-默认',
      w2: '默认的下拉刷新效果 - 模块将同手势一起移动',
      isViewHref:true
    },
    {
      w1: '下拉刷新-仿原生',
      w2: '模块将不同手势一起移动',
      isViewHref:true
    },
    {
      w1: '上拉刷新',
      w2: '滑动到底部上拉刷新，不同于无限滚动',
      isViewHref:true
    },
    {
      w1: '上拉和下拉刷新',
      w2: '2种模式同时存在的效果',
      isViewHref:true
    },
    {
      w1: '无限滚动',
      w2: '滚动到底部触发刷新',
      isViewHref:true
    },
  ]

  export default{
    name: 'index',
    data(){
      return {
        paneList,
        options: {
          isHideLeft: true
        },
        pullOptions: {
          isViewPullShadow: true
        }
      }
    },
    methods: {
      'goHref'(i){
        this.$router.push({name: 'page' + (i + 1)})
      }
    },
    components: {
      'vuu-pull': vuuPull,
      'vuu-header': nav,
      'vuu-pane': pane
    }
  }
</script>
<style>

</style>
